<template>
	<view class="order">
		<!-- 导航 -->
		<view class="nav">
			<view class="item" v-for="(item,index) in orderNavList" :key="item.name" @tap="changeNav(index)">
				<view class="name" :class=" currentNav == index ? 'active' : '' ">{{ item.name }}</view>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="list" v-if="currentNav != 4 && this.list.length != 0">
			<view class="item" v-for="items in list" :key="items.order.id">
				<view class="order-title">
					<view class="order-number">订单编号: {{ items.order.orderSn }}</view>
					<view class="text">{{ items.order.status | statusText }}</view>
				</view>
				<view class="skuInfo" v-for="item in items.items" :key="item.id">
					<image class="img" :src="item.productPic"></image>
					<view class="info">
						<view class="p p1">
							<view class="name">{{ item.productName }}</view>
							<view class="price">¥{{ item.productPrice }}</view>
						</view>
						<view class="p p2">
							<view class="text">编号：{{ item.id }}</view>
							<view class="number">x {{ item.productQuantity }}</view>
						</view>
						<view class="p p3">
							<view class="text">
								规格：
							</view>
							<view class="productAttr">
								<view class="key" v-for="ite in JSON.parse(item.productAttr)" :key="ite.key">{{ ite.key }} : {{ ite.value }}</view>
							</view>
						</view>
					<!--<view class="p4" v-if="currentNav == 2" @tap="returnGoods(item.orderId,item.id)">
							退货
						</view> -->
						<view v-show="items.order.status == 2" class="p4">
							<text v-if="isReturn == 0" @tap="returnGoods(item.orderId,item.id)">退货</text>
							<text  v-if="isReturn == 1"  style="color: red;" >退货中</text>
						</view>
					</view>
				</view>
				<view class="order-price">
					<view class="time">时间: {{ items.order.createTime }}</view>
					<view class="sum">合计: ¥{{ items.order.totalAmount }}</view>
				</view>
				<view class="btns" v-if="currentNav == 0">
					<view class="btn cancel" @tap="cancel(items.order.id)">取消订单</view>
					<view class="btn buy" @tap="buy(items.order.id)">付款</view>
				</view>
				<view class="btns" v-else-if="currentNav == 2">
					<view class="btn" @tap="confirm(items.order.id)">确认收货</view>
				</view>
				<view class="btns" v-else-if="currentNav == 3 || currentNav == 4" @tap="del(items.order.id)">
					<view class="btn del">订单已关闭,删除记录</view>
				</view>
			</view>
		</view>
		<!-- 退单列表 -->
		<view class="list" v-else-if="currentNav == 4 && this.returnList != 0">
			<view class="item" v-for="item in returnList" :key="item.id">
				<view class="order-title">
					<view class="order-number">订单编号: {{ item.orderSn }}</view>
					<view class="text">{{ item.status | orderProcessText }}</view>
				</view>
				<view class="skuInfo">
					<image class="img" :src="item.productPic"></image>
					<view class="info">
						<view class="p p1">
							<view class="name">{{ item.productName }}</view>
							<view class="price">¥{{ item.productPrice }}</view>
						</view>
						<view class="p p2">
							<view class="text">编号：{{ item.id }}</view>
							<view class="number">x {{ item.productCount }}</view>
						</view>
						<view class="p p3">
							<view class="text">
								规格：
							</view>
							<view class="productAttr">
								<view class="key" v-for="items in JSON.parse(item.productAttr)" :key="items.key">{{ items.key }} : {{ items.value }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="order-price">
					<view class="time">时间: {{ item.createTime }}</view>
					<view class="sum">合计: ¥{{ item.productPrice }}</view>
				</view>
			</view>
		</view>
		<view class="none" v-else>
			暂无数据
		</view>
	</view>
</template>

<script>
	import { findAllOrders,receiveDone,_clearOrderFocus } from "../../api/order/index.js";
	import { orderReturnApplys,cancelOrder } from "../../api/orderPackage/index.js";
	import mix from "../../mixins/index.js";
	export default {
		mixins: [mix],
		data() {
			return {
				orderNavList: [], // 订单 - 导航
				orderList: [], // 订单 - 列表
				returnList: [], // 退单 - 列表
				currentNav: 0, // 订单 - 当前导航
				isReturn: 0, // 切换 - 退货|退货中
			};
		},
		filters:{
			statusText(val){
				if(val == 0){
					return "未付款"
				}else if(val == 1){
					return "确认付款,等待发货"
				}else if(val == 2){
					return "已发货"
				}else if(val == 3){
					return "已收货"
				}else if(val == 4){
					return "已退单"
				}else{
					return "无效订单"
				}

			},
			//已退款和已拒绝颜色需要展示成红色
			orderProcessText(process) {
				var text = '等待处理';
				switch (JSON.stringify(process)) {
					case '0':
						text = '等待处理';
						break;
					case '1':
						text = '确认退货,等待用户发货';
						break;
					case '2':
						text = '已退款';
						break;
					case '3':
						text = '已拒绝';
						break;
					case '9':
						text = '拒绝退货';
						break;

					default:
						break;
				}
				return text;
			}
		},
		onLoad(options) {
			// 本地存储 - 订单导航
			this.orderNavList = uni.getStorageSync("orderNavList");
			this.currentNav = options.type;
			// 判断 - 是否登陆
			if(this.checkLogin()){
				// 获取 - 订单列表
				this.init();
				// 获取 - 退单列表
				orderReturnApplys().then(res=>{
					this.returnList = res.data.data.items
				});
			}
		},
		onShow() {
			// 判断 - 是否登陆
			if(this.checkLogin()){
				// 获取 - 订单列表
				this.init();
				// 获取 - 退单列表
				orderReturnApplys().then(res=>{
					this.returnList = res.data.data.items
				});
			}
		},
		computed:{
			// 查找 - 对应状态的数据
			list(){
				return this.orderList.filter(ele=>{
					// 已发货 - 显示3和4的数据
					if(this.currentNav == 3){
						return ele.order.status == 3 || ele.order.status == 4
					}
					return ele.order.status == this.currentNav
				})
			}
		},
		methods:{
			// 获取 - 订单列表
			init(){
				findAllOrders().then(res=>{
					this.orderList = res.data.data.orderList
				});
			},
			// 退货
			returnGoods(val1,val2){
				uni.navigateTo({
					url: `../orderPackage/orderBack/orderBack?id=${val1}&skuid=${val2}`
				})
			},
			// 删除订单
			del(val){
				_clearOrderFocus(val).then(res=>{
					if(res.data.success){
						this.init();
						uni.showToast({
							title: "删除成功"
						})
					}
				})
			},
			// 确认收货
			confirm(val){
				receiveDone({ orderId: val}).then(res=>{
					if(res.data.success){
						this.init();
						uni.showToast({
							title: "收货成功"
						})
					}
				})
			},
			// 付款
			buy(val){
				uni.navigateTo({
					url: `./confirmOrder/confirmOrder?id=${val}`
				})
			},
			// 取消订单
			cancel(val){
				cancelOrder(val).then(res=>{
					if(res.data.success){
						this.init();
						uni.showToast({
							title: "删除成功",
							icon: "error"
						})
					}
				})
			},
			// 订单导航 - 切换
			changeNav(val){
				this.currentNav = val
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "./index.scss"
</style>
